<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型外边距(box model margin)</title>
  <!-- 
    CSS的盒子模型中的外边距（Margin）是指元素与其他元素之间的距离，用于控制元素之间的间隔。外边距可以通过设置margin属性来定义，影响元素在页面布局中的位置和间距。
    以下是CSS盒子模型中外边距的主要要点： 
 
      1. 上外边距（Margin Top）：通过设置margin-top属性来定义元素顶部与上方元素之间的距离。 
      2. 右外边距（Margin Right）：通过设置margin-right属性来定义元素右侧与右侧元素之间的距离。 
      3. 下外边距（Margin Bottom）：通过设置margin-bottom属性来定义元素底部与下方元素之间的距离。 
      4. 左外边距（Margin Left）：通过设置margin-left属性来定义元素左侧与左侧元素之间的距离。 
   -->
   <style>
     .box-model-margin {
       width: 200px;
       height: 200px;
       background-color: #f00;
       /* margin */
       margin-top: 20px;
       margin-right: 20px;
       margin-bottom: 20px;
       margin-left: 20px;
     }

     .container-margin {
       width: 400px;
       height: 400px;
       background-color: #0f0;
        
       /* margin */
       /* margin-top: 20px;
       margin-right: 20px;
       margin-bottom: 20px;
       margin-left: 20px; */
       /* 缩写 */
       /* margin: 20px; */
       margin: 20px 30px;
     }
   </style>
</head>
<body>

  <div class="box-model-margin"></div>
  <div class="container-margin"></div>
  
</body>
</html>